<template>
    <div class="admin-user-power">

        <div class="power-tree">
            <bi-tree
            class=""
            v-if="!loading"
            :data="list"
            checkbox
            item-key="power"
            :checked="checkList"
            @updateCheck="updateCheck" 
            :storagename="$user.getStorageName('power_input')"
            default-fold
            ></bi-tree>
        </div>

        <div class="admin-user-power-extend">
            <template v-if="!loading && !extendChange">
        
                <template v-for="powerItem in extendDataList" :key="powerItem.name">
                    <div class="box"  v-if="inPower(powerItem.name)" >
                        <h6 class="title">
                            <input type="checkbox" class="form-check-input extend-use-check" id="user-power-extend" name='user-power-extend' :value="powerItem.name" v-model="extendUseList" />
                            {{getPowerTitle(powerItem.name)}}
                            <div class="app">
                                {{getPowerAppTitle(powerItem.name)}}    
                            </div>
                        </h6>
                        <div class="content">
                            <template v-for="component in powerItem.components" :key="component.app">
                                <component 
                                :is="component.name" 
                                :app="component.app" 
                                :power="powerItem.name" 
                                :disabled="!extendUseList.includes(powerItem.name)"
                                :default-data="getExtendGroupData(component.app,powerItem.name)"
                                :user-data="getExtendUserData(component.app,powerItem.name)"
                                ></component>
                            </template>
                        </div>
                    </div>
                </template>
            </template>
            <div class="ctrl">
                <bi-icon loading v-if="loading" ></bi-icon>
            </div>
        </div>

        <div class="more-box" v-if="loading">
            <bi-icon data="fa fa-spinner fa-spin"></bi-icon>
            <div class="msg">{{msg}}</div>
        </div>
    </div>
</template>


<script>
import fieldMixin from  '@@/admin/assets/bi-plug/fieldMixin.js';
import extendList from  '#admin-power-extend.js';

//对数据进行整理

function removeChar(str, char) {
  return str.replace(new RegExp(char, 'g'), '');
}
let components = {};
let extendDataList = [];
for(let app in extendList){
    
    if (extendList[app] instanceof Array){
        for(let i in extendList[app]){
            let extend = extendList[app][i]; 
            let name = app;
            if (extend.power!='*'){
                name = removeChar(app+extend.power,/\./);
            }
            components[name] =  extend.component;
            let insert = false;
            extendDataList.forEach(item=>{
                if(item.power ==  extend.power){
                    insert = true;
                    item.components.push({
                        app,
                        name:name,
                    });
                }
            });

            if (!insert){
                extendDataList.push({
                    name:extend.power,
                    components:[{
                        app,
                        name:name,
                    }]
                });
            }
        }
    }
}


export default {
    mixins:[fieldMixin],
    emits:['update:extend'],
    components,
    provide() {
        return {
            getExtendValue:(app,power)=>{
                if (this.extendValue[power] && this.extendValue[power][app]){
                    return this.extendValue[power][app];
                }

                return null;
            },
            updateExtend:(app,power,data)=>{
                 
                let value = this.extendValue;
                if (typeof value !='object'){
                    value = {};
                }
            
                if (value[power] == undefined) {
                    value[power] = {};
                }

                if (value[power][app] == undefined) {
                    value[power][app] = {};
                }
                 
                value[power][app] = JSON.parse(JSON.stringify(data));
                 this.extendValue = value;
                this.updateExtendValue();
            },
            labelWidth:'auto'
        }
    },
    data(){

        let extendUseList = [];
        let extendValue = {};
        let checkList   = [];
        
        if (this.extend){
            extendUseList =  Object.keys(this.extend);
        }


        if (this.value){
            checkList = this.value.split(',');
        }

        if (this.extend){
            extendValue = this.extend;
        }


        return {
            list:[],
            checkList,
            groupPower:[],
            groupPowerExtend:{},
            extendDataList,
            extendValue,
            extendUseList,
            extendChange:false,
            allPowerTitle:[],
            checkStatus:true,
            loading:false,
            msg:'',
            userPowerExtend:{}
        }
    },
    props:{
        group:{
            type:[Number,String],
            default:0,
        },
        extend:{
            type:Object,
            default:{}
        },
        
    },
    watch:{
        group(val){
            this.flash();
        },
        extendUseList(){
            this.updateExtendValue();
        }
    },
    methods:{
        flash(){
            this.loading = true;
            this.$ajax({
                url:this.$url({app:'admin','controller':'user','action':'powerTree'}),
                data:{
                    group:this.group
                },
                success:(data)=>{
                    
                    this.list = data.tree;
                    let power = [];
                    let groupPower = [];

                    if (this.value){
                        power = this.value.split(',').concat(data.groupPower)
                    }

                    if (data.groupPower){
                        groupPower = data.groupPower.split(',');
                        this.groupPower  = groupPower;
                    }

                    this.groupPowerExtend = data.groupPowerExtend;
                    
                    this.allPowerTitle = data.allPowerTitle;
                    this.checkList = power.concat(groupPower);
                    this.userPowerExtend = data.userPowerExtend;
                    this.loading = false;
                 }
            });
        },
        updateCheck(list){
            this.extendChange = true;
            this.value = list.join(',');
            this.$nextTick(()=>{
                this.extendChange = false;
            });
        },
        updateExtendValue(){
            
            let value  = {};
            
            for(let i=0;i<this.extendUseList.length;i++){
                let power = this.extendUseList[i];
                if (this.extendValue[power]){
                    value[power] = this.extendValue[power];
                }
            }
            
             
            this.$emit('update:extend',value);
        },
        getPowerTitle(power){
            if (power=='*') return '常用权限';
            return this.allPowerTitle[power]??'';
        },
        getPowerAppTitle(power){
            if (power=='*') return '';
            let list = power.split('.');
            if (list.length==1) return '';
            return this.allPowerTitle[list[0]]??'';
        },
        getExtendGroupData(app,power){
            if (this.groupPowerExtend[power] && this.groupPowerExtend[power][app]){
                return this.groupPowerExtend[power][app];
            }

            return {};
        },
        getExtendUserData(app,power){
            
            if (this.userPowerExtend[power] && this.userPowerExtend[power][app]){
                return this.userPowerExtend[power][app];
            }

            return {};
        },
        inPower(power){
            //if (this.power == 'ALL') return true;
            if (power=='*') return true;

            for(let i=0;i<this.groupPower.length;i++){
                if(this.groupPower[i].substr(0,power.length)==power){
                    return true;
                }
            }

            if (this.value){
                let list = this.value.split(',');

                for(let i=0;i<list.length;i++){
                    if(list[i].substr(0,power.length)==power){
                        return true;
                    }
                }
            }

            
            return false;
        },
    },
    mounted(){
        this.flash();

        
    }
}
</script>

<style>
.admin-user-power{
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    position: relative;
    height: 300px;
    display: flex;
    overflow: hidden;
 }
.power-tree{
    margin: 5px;
    height: 100%;
    overflow: auto;
    width: 50%;
}
.admin-user-power .admin-user-power-extend{
    width: 50%;
    border-left: 1px solid var(--bs-border-color);
}


.admin-user-power-extend{
    padding: 10px;
    overflow: auto;
    position: relative;
    min-height: 300px;
}

.admin-user-power-extend .box{
    margin-bottom: 15px;
}


.admin-user-power-extend h6{
    display: flex;
    align-items: center;
}

.admin-user-power-extend h6 .extend-use-check{
    margin-top: 0;
    margin-right: 5px;
}

.admin-user-power-extend h6 .app{
    font-size: 12px;
    color: var(--bs-gray-500);
    padding-left: 10px;
}

.admin-user-power-extend .content{
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px dashed var(--bs-border-color);
}


.admin-user-power-extend  .form-label{ margin-bottom: 0.25em;}


.admin-user-power-extend  .form-item .form-item-label{
    color: var(--bs-gray-500);
    font-size: 14px;
    line-height: 30px;
}

.admin-user-power-extend  .form-item-content{
    font-size: 14px;
}

.admin-user-power-extend  .form-item{
    flex-direction: column;
}

.admin-user-power .more-box{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
}
</style>